import { useInitState } from '@/hooks';
import { fetchChannels } from '@/store/modules/homeSlice';
import { Popup, Tabs } from 'antd-mobile';
import styles from './index.module.scss';
import Icon from '@/components/Icon';
import { useNavigate } from 'react-router-dom';
import Channels from './components/Channels';
import { useState } from 'react';

const Home = () => {
  const channels = useInitState(fetchChannels, "home", "channels");
  const navigate = useNavigate();
  const channelShow = () => {
    setVisible(true);
  };
  const [visible, setVisible] = useState(false);
  const onChannelClose = () => {
    setVisible(false);
  };
  return (
    <div className={styles.root}>
      {channels.length > 0 && (
        <div className='tabsHeader'>
          <Tabs className='tabs' activeLineMode='fixed'>
            {channels.map(channel => (
              <Tabs.Tab key={channel.id} title={channel.name}>{channel.name}频道的内容</Tabs.Tab>
            ))}
          </Tabs>
          <div className='tabs-opration'>
            <Icon type="iconbtn_search" onClick={() => navigate('/search')} />
            <Icon type="iconbtn_channel" onClick={channelShow} />
          </div>
        </div>
      )}
      <Popup
        visible={visible}
        onMaskClick={onChannelClose}
        position="left"
        className="channel-popup"
      >
        <Channels onClose={onChannelClose} />
      </Popup>
    </div>
  );
};
export default Home;